<template>
<div>
    <div class="img" >
        <div v-for="(item,key) in allgames" :key="key"
            @click="pushToView(item.cn)"
        >
            <img :src="'http://192.168.2.245:3000'+item.icon2" />
        </div>
    </div>
    <div id="CaiPiao">
        <div class="box" @click="addGames=true">
            <i class="fa fal fa-plus"></i>
        </div>
    </div>
    <add-cai-piao
    :addGames='addGames'
    />
    <router-view/>
   
</div>

</template>
<script>
import addCaiPiao from './addCaiPiao'
export default {
    components:{addCaiPiao},
    data() {
        return {
            addGames:false,
            showBall:false
        };
    },
    computed:{
        allgames(){
            return this.$store.getters.allgames
        }
    },
    methods: {
        pushToView(cn){
            this.$router.push({name:cn})
        }
    },
    mounted(){
         this.$store.dispatch('loadgames')
    }
}
</script>
<style lang="scss" scoped>
#CaiPiao{
    width: 100%;
    height: 100%;
   
    .box{
        width: 100px;
        height: 100px;
        border: 1px dotted #353434;
        border-radius: 10px;
        i{
            font-size: 30px;
            line-height: 100px;
        }
    }
    
}
.img{
        width: 100%;
        height: 100%;
        display:flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        div{
            margin: 5px;

        }
    }
</style>
